import { useEffect, useState } from "react";

import { Switch, Tooltip } from "antd";
import { QuestionCircleOutlined } from '@ant-design/icons';

import styles from '../../styles/module.module.css'
import { $ } from "@components/util";

import InsuranceAmount from "./InsuranceAmount";
const moduleClass = $(styles, "module", 'absolute');

const ModuleInsurance = (props) => {
  const defaultStyle = {
    top: 0,
    left: 0
  }
  const { title, address = '全国', style = defaultStyle, desc = '', children } = props


  const [checked, setchecked] = useState(true)
  const onChange = (checked, event) => {
    setchecked(checked)
  };




  return (
    <>
      <div className={moduleClass} style={checked ? style : { ...style, width: 'auto' }}>
        <div className={styles.titleBox}>
          <div onClick={() => setchecked(true)}>
            <span>{title}</span>
            <Tooltip title={desc ? desc : title}><QuestionCircleOutlined /></Tooltip>
          </div>
          {checked ? <Switch defaultChecked size="small" checked={checked} onChange={onChange} /> : null}
        </div>
        <div style={{ display: checked ? 'block' : 'none' }}>
          {/* <Premium address={address} /> */}
          <InsuranceAmount address={address} />
        </div>
      </div>
    </>
  );
};

export default ModuleInsurance;
